<template>
  <div class="order">
    <van-nav-bar title="我的订单" class="topNav"> </van-nav-bar>
    <van-tabs v-model:active="active" swipeable>
      <van-tab v-for="item in titleList" :title="item" :key="item">
        <p
          v-show="item != '全部'"
          style="color: #333333; text-align: center; margin-top: 10vh"
        >
          暂无此类订单
        </p>
        <div class="list" v-show="item == '全部'">
          <ul>
            
            <li v-for="item in ordList" :key="item.id">
              <div
                class="goodsList"
                v-for="good in item.goods_info"
                :key="good.id"
                @click="jumpToGoods(good)"
              >
                <van-card
                  :num="good.num"
                  :price="good.price + '.00'"
                  :desc="good.desc"
                  :title="good.name"
                  :thumb="good.s_goods_photos[0].path"
                  :origin-price="good.sale_price + '.00'"
                />
              </div>
              <div class="bottom">
                <h6>购买时间：{{ item.createdAt }}</h6>
                <p>
                  购买价格：<span>{{ item.allPrice }}</span>
                </p>
               
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <doucker :choossIndex="2" />
  </div>
</template>
<script>
document.documentElement.scrollTop = 0;
</script>
<script setup>
import { ref, reactive } from "vue";
import { get, post, deleteService, otherget } from "../../utils/request.js";
import { Toast, Dialog } from "vant";
import { useRouter } from "vue-router";
import doucker from "../../components/doucker.vue";
const router = useRouter();
let ordList = ref([]);
const active = ref(0);
const titleList = ref(["全部", "待付款", "待发货", "已发货", "待评价"]);
let orderIdArr = [];

const getdata = async () => {
  Toast.loading({
    message: "正在请求订单数据，请稍后...",
    forbidClick: true,
    duration: 0,
  });
  const params = {
    project_id: 234,
    page: 1,
    limit: 5,
  };
  let result;
  let timer;

  try {
    result = await otherget(`/order`, params);
  } catch (error) {
    timer = setTimeout(() => {
      Toast.clear();
      Toast.fail({ message: "请求失败，请刷新本页面", forbidClick: true });
      clearTimeout(timer);
    }, 3000);
  }
  if (result.msg == "获取成功") {
    Toast.clear();
    ordList.value = result.result.rows;

    ordList.value.forEach((ele) => {
      ele.goods_info = JSON.parse(ele.goods_info);
      ele.createdAt = new Date(ele.createdAt).toLocaleString();
      ele.allPrice = 0;
      ele.goods_info.forEach((item) => {
        if (item.sale_price) {
          ele.allPrice += Number(item.sale_price) * Number(item.num);
        } else {
          ele.allPrice += Number(item.price) * Number(item.num);
          console.log(item);
        }
        orderIdArr.push(ele.order_id);
      });
    });
  }
};
const jumpToGoods = (good) => {
  console.log(good);
  router.push(`/goodsDetail/${good.id}`);
};
getdata();
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  .topNav {
    --van-nav-bar-arrow-size: 18px;
    --van-nav-bar-icon-color: black;
    --van-nav-bar-text-color: black;
  }
  .list {
    margin: 0;
    margin-top: 1vh;
    padding-bottom: 6vh;
    li {
      margin: 0 auto;
      width: 95vw;
      background-color: white;
      margin-bottom: 1vh;
      --van-card-background-color: white;
    }
  }
}
.bottom {
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;

  h6,
  p {
    margin: 3vh 0;
    font-size: 14px;
    font-weight: normal;
  }
  span {
    color: red;
  }
}
</style>
